<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sortable table by drag and drop</title>
<style type="text/css" media="screen" rel="Stylesheet"><!--
	.drag_handle{ background-color: #89756A; padding: 0px; margin: 2px; width:20px; height:16px; cursor: pointer; }
	.even{ background-color: #AAA; }
	.odd{ background-color: #EEE; }
--></style>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../lib/prototype.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/logger.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/prototype_ext.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/dnd.js" ></script>
</head>
<body>
テーブルをドラッグして並び替えできるようにするテスト
<div style="margin-top:100px;"></div>
<table id="table0" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td>ID</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>The Serverside.com</td><td>http://www.theserverside.com/</td></tr>
		<tr><td>2</td><td>Eclipse.org</td><td>http://www.eclipse.org/</td></tr>
		<tr><td>3</td><td>MSDN</td><td>http://msdn.microsoft.com/</td></tr>
		<tr><td>4</td><td>IBM developerWorks</td><td>http://www-06.ibm.com/jp/developerworks/</td></tr>
		<tr><td>5</td><td>codehaus</td><td>http://codehaus.org/</td></tr>
	</tbody>
</table>
<script language="JavaScript" type="text/javascript"><!--

Event.observe(window, "load", function(event){
	var sortableTable = new HTMLTableElement.DnDSortable( "table0" );
}, false);

--></script>

<br/><br/><br/>

<div id="tables">
<input type="checkbox" id="draggable_toggle" checked="checked"/><label for="draggable_toggle">有効・無効</label>
<table id="table1" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td width="20">&nbsp;</td>
			<td>ID</td>
			<td>No.</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr class="even"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>1</td><td class="item_no">1</td><td>prototype.js</td><td>http://prototype.conio.net/</td></tr>
		<tr class="odd"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>2</td><td class="item_no">2</td><td>script.aculo.us</td><td>http://script.aculo.us/</td></tr>
		<tr class="even"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>3</td><td class="item_no">3</td><td>Rico</td><td>http://openrico.org/</td></tr>
		<tr class="odd"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>4</td><td class="item_no">4</td><td>Ruby</td><td>http://www.ruby-lang.org/</td></tr>
		<tr class="even"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>5</td><td class="item_no">5</td><td>Ruby on Rails</td><td>http://www.rubyonrails.org/</td></tr>
	</tbody>
</table>

----------------------  separation  ------------------------

<table id="table2" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<td width="20">&nbsp;</td>
			<td>ID</td>
			<td>No.</td>
			<td>名前</td>
			<td>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr class="odd"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>6</td><td class="item_no">6</td><td>java</td><td>http://java.sun.com/</td></tr>
		<tr class="even"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>7</td><td class="item_no">7</td><td>apache httpd</td><td>http://httpd.apache.org/</td></tr>
		<tr class="odd"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>8</td><td class="item_no">8</td><td>Tomcat</td><td>http://tomcat.apache.org/</td></tr>
		<tr class="even"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>9</td><td class="item_no">9</td><td>JBoss</td><td>http://labs.jboss.com/</td></tr>
		<tr class="odd"><td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td><td>10</td><td class="item_no">10</td><td>Seasar</td><td>http://www.seasar.org/</td></tr>
	</tbody>
</table>
二つのテーブルの間でも行を移動できる。
</div>
<script language="JavaScript" type="text/javascript"><!--


var evenOddClasses = new EvenOdd();

Event.observe(window, "load", function(event){
	var sortableTable = new HTMLTableElement.DnDSortable(
		[ "table1", "table2"]
	);
	Object.extend(sortableTable, {
			getDraggingRow: function(event) {
				var t = Event.element(event);
				var handle = Element.findAncestorByClassName(t, "drag_handle");
				return (handle) ? Element.findAncestorByTagName(handle, "TR") : null;
			},
			getAcceptingRow: function(event) {
				var t = Event.element(event);
				if (Element.findAncestorByTagName(t, "TBODY"))
					return Element.findAncestorByTagName(t, "TR");
				else if (Element.findAncestorByTagName(t, "THEAD")) {
					var table = Element.findAncestorByTagName(t, "TABLE");
					if(table.tBodies.length < 1)
						return null;
					var tbody = table.tBodies[0];
					if(tbody.rows.length > 0)
						return tbody.rows[0];
					else
						return Element.findAncestorByTagName(t, "TR");
				} else
					return null;
			},
			afterMoveRow: function( row ) {
				var item_no_cells = document.getElementsByClassName("item_no", $("tables"));
				var rows = [];
				for(var i = 0; i < item_no_cells.length; i++) {
					var cell = item_no_cells[i];
					var tr = Element.findAncestorByTagName(cell, "TR");
					rows.push(tr);
					cell.innerHTML = this.seqRowIndex(tr);
				}
				evenOddClasses.applyClassName(rows);
			}
	} );
	Event.observe($("draggable_toggle"), "click", function(event) {
		var check = Event.element(event);
		sortableTable.toggle(check.checked);
	}, false);
}, false);

--></script>


</body>
</html>
